<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<!doctype html>
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="/" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Apache StreamPipes - Self-Service IIoT Toolbox</title>

        <link
            rel="icon"
            type="image/png"
            sizes="96x96"
            href="assets/img/favicon/favicon-96x96.png"
        />
        <meta name="theme-color" content="#ffffff" />

        <style type="text/css">
            body {
                margin: 0;
            }

            .app-loading {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100vh;
                width: 100%;
                z-index: 80;
            }

            .logo-splash {
                width: 50px;
                height: 50px;
            }

            @keyframes heartbeat-anim {
                0% {
                    transform: scale(0.75);
                }
                20% {
                    transform: scale(1);
                }
                40% {
                    transform: scale(0.75);
                }
                60% {
                    transform: scale(1);
                }
                80% {
                    transform: scale(0.75);
                }
                100% {
                    transform: scale(0.75);
                }
            }

            .animated-logo {
                width: 50px;
                height: 50px;
                animation: heartbeat-anim 1.5s infinite;
            }
        </style>
    </head>

    <body>
        <sp-app-root>
            <div style="height: 100%" role="main" tabindex="-1" flex>
                <div
                    class="sp-fade"
                    style="min-height: 100vh; max-height: 100vh"
                >
                    <div class="app-loading">
                        <div class="animated-logo">
                            <img
                                src="/assets/img/favicon/favicon-96x96.png"
                                class="logo-splash"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </sp-app-root>
    </body>
</html>
